<template>
  <!-- 绩效考核详情 -->

  <div class="performance-detail">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow"></top-header>
    <!-- 中间内容 -->
    <div class="content">
      <van-cell-group>
        <van-cell title="工作任务">
          <template #label>
            <span class="mine">自评： {{perData.workTask_self}}</span>
            <span class="leader">上级审核： {{perData.workTask_superior!==null?perData.workTask_superior:'未审核'}}</span>
          </template>
        </van-cell>
        <van-cell title="工作质量">
          <template #label>
            <span class="mine">自评： {{perData.workQuality_self}}</span>
            <span class="leader">上级审核： {{perData.jobSkill_superior!==null?perData.jobSkill_superior:'未审核'}}</span>
          </template>
        </van-cell>
        <van-cell title="工作技能">
          <template #label>
            <span class="mine">自评： {{perData.jobSkill_self}}</span>
            <span class="leader">上级审核： {{perData.jobSkill_superior!==null?perData.jobSkill_superior:'未审核'}}</span>
          </template>
        </van-cell>
        <van-cell title="工作态度与责任感">
          <template #label>
            <span class="mine">自评： {{perData.workAttitude_self}}</span>
            <span class="leader">上级审核：
              {{perData.workAttitude_superior!==null?perData.workAttitude_superior:'未审核'}}</span>
          </template>
        </van-cell>
        <van-cell title="协调性">
          <template #label>
            <span class="mine">自评： {{perData.harmony_self}}</span>
            <span class="leader">上级审核： {{perData.harmony_superior!==null?perData.harmony_superior:'未审核'}}</span>
          </template>
        </van-cell>
        <van-cell title="纪律性">
          <template #label>
            <span class="mine">自评： {{perData.senseOfDiscipline_self}}</span>
            <span class="leader">上级审核：
              {{perData.senseOfDiscipline_superior!==null?perData.senseOfDiscipline_superior:'未审核'}}</span>
          </template>
        </van-cell>
        <van-cell title="减分项">
          <template #label>
            <span class="mine">自评： {{perData.deduction_self}}</span>
            <span class="leader">上级审核： {{perData.deduction_superior!==null?perData.deduction_superior:'未审核'}}</span>
          </template>
        </van-cell>
        <van-cell title="加分项">
          <template #label>
            <span class="mine">自评： {{perData.awardedMarks_self}}</span>
            <span class="leader">上级审核：
              {{perData.awardedMarks_superior!==null?perData.awardedMarks_superior:'未审核'}}</span>
          </template>
        </van-cell>
        <van-cell title="考核日期">{{perData.assess_date | filterTime}}</van-cell>
        <van-cell title="备注">{{perData.remark}}</van-cell>
      </van-cell-group>
    </div>
    <!-- 按钮 -->
    <div class="edit-btn">
      <van-button block size="small" type="info" color="burlywood" @click="onDel()">删除</van-button>
      <van-button v-if="this.power === '部门审核人' && this.perData.isChecked == false" block size="small" type="info"
        color="burlywood" @click="onAudit()">审核</van-button>
      <van-button :loading="isLoading" block size="small" type="info" color="burlywood" @click="onPrint()">打印
      </van-button>
    </div>
  </div>
</template>

<script>
import { TopHeader } from '@/components'
import { DeleteAssessForm, ExportAssessForm } from '@/request/api'
export default {
  name: 'performanceDetail',
  components: {
    TopHeader
  },
  filters: {
    filterTime (val) {
      return val.slice(0, 4) + '年' + val.slice(5, 7) + '月'
    }
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      power: sessionStorage.getItem('power'), // 用户权限

      perData: {},
      isLoading: false // 导出按钮Loading
    }
  },
  created () {
    this.perData = JSON.parse(sessionStorage.getItem('PERFORMANCE_LIST'))
    console.log(this.perData)
  },
  methods: {
    // 删除按钮触发事件
    onDel () {
      console.log('删除')
      this.$dialog.confirm({
        title: '提示',
        message: '您确定要删除吗?',
        confirmButtonColor: 'burlywood'
      }).then(() => {
        const param = { 'assess_id': this.perData.assess_id }
        DeleteAssessForm(param).then(res => {
          console.log(res)
          this.$router.go(-1)
        })
      })
    },
    onAudit () {
      console.log('审核点击')
      this.$router.push('/PerformanceAppraisal')
    },
    // 打印按钮触发事件
    onPrint () {
      this.isLoading = true
      const param = { assess_id: this.perData.assess_id }
      ExportAssessForm(param).then(res => {
        if (res.Tag === 1) {
          this.isLoading = false
        } else {
          this.$Toast.fail('打印失败')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.performance-detail {
  height: 100%;
  width: 100%;
  .content {
    // box-shadow: 0 3px 4px 2px rgb(240, 240, 240);
    height: calc(100% - 2.6rem);
    overflow-y: auto;
    overflow-x: hidden;
    .van-cell-group {
      .van-cell {
        .van-cell__title {
        }
        .van-cell__label {
          display: flex;
          justify-content: space-around;
        }
      }
    }
  }
  .edit-btn {
    width: 100%;
    height: 1.4rem;
    background-color: white;
    box-shadow: 0 -3px 4px 2px rgb(240, 240, 240);
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    bottom: 0;
    .van-button {
      width: 40%;
    }
  }
}
</style>
